<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		/*手机页面*/
		@media (max-width: 767px) { 
			.article-title {
				padding: 10px;
			}
			.article-title .title {
				width: calc(100% - 110px);
			}
			.article-title .share-num img {
				margin-right: 5px;
			}
			.article-title .share-num img:nth-child(3) {
				margin-left: 10px;
			}
		}
		.form-select {
			display: inline-block;
			width: auto;
			margin-left: 15px;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="article-title">
			<div class="title">文章标题</div>
			<div class="share-num">
				<img src="../../img/myExtension/content-read.png" /><span></span><img src="../../img/myExtension/content-share.png" /><span></span>
			</div>
		</div>
		<div class="table-list">
			<div class="table-btn">
				<button id="exportTable" class="btn btn-default" type="button">导出表格</button>
				<select id="deliverStatus" class="form-control form-select">
					<option value="0">是否发货</option>
					<option value="1">是</option>
					<option value="2">否</option>
				</select>
				<select id="payStatus" class="form-control form-select">
					<option value="10">是否支付</option>
					<option value="1">是</option>
					<option value="0">否</option>
				</select>
			</div>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>序号</th>
						<th>订单号</th>
						<th>收货人姓名</th>
						<th>客户昵称</th>
						<th>收货人号码</th>
						<th>收货人地址</th>
						<th>订单留言</th>
						<th>订单总额</th>
						<th>支付状态</th>
						<th>是否发货</th>
						<th>物流号</th>
						<th>选择的规格</th>
						<th>单价</th>
						<th>购买数量</th>
						<th>运费</th>
						<th>支付时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<nav id="page" class="text-center" aria-label="Page navigation">
			<ul class="pagination">
			</ul>
		</nav>
	</div>	
	<!--发货-->
	<div class="modal fade" id="deliverModel" tabindex="-1" role="dialog" aria-labelledby="deliverModelLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
			    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    	<h4 class="modal-title" id="deliverModelLabel">是否确定发货</h4>
				</div>
			  	<div class="modal-body">
			  		<form class="form-horizontal">
			  			<div class="form-group">
						    <label for="logisticsNumber" class="col-sm-3 control-label">物流单号：</label>
						    <div class="col-sm-9">
						      <input type="text" class="form-control" id="logisticsNumber" placeholder="请填写物流单号，可不填">
						    </div>
						</div>
			  		</form>	
			  	</div>
			  	<div class="modal-footer">
			    	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			    	<button type="button" id="addDeliver" class="btn btn-primary">确认</button>
			  	</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var userID,companyID,articleID,goodsID;
		var isPageInit = true;
		var goodsOrderId;
		$(function(){
			toastr.options = {
                "closeButton": true,
                "timeOut": 2000,
                "positionClass": "toast-center"
            };
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			articleID = base.getParameter("articleID");
			goodsID = base.getParameter("goodsID");
			//获取文章信息
			base.postData(base.url.articleDataInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackArticleInfo);
			initOrderInfoList(1);
		});
		function callbackArticleInfo(data) {
			if (data.success) {
				$(".article-title .title").text(data.context.articleTitle);
				$(".article-title .share-num").html('<img src="../../img/myExtension/content-read.png" /><span>'+data.context.articleReadNum+'</span><img src="../../img/myExtension/content-share.png" /><span>'+data.context.articleShareNum+'</span>');
			}
		}
		function initOrderInfoList(page){
			var deliverStatus = $("#deliverStatus").val();
			var payStatus = $("#payStatus").val();
			base.postData(base.url.getGoodsOrderSpecListByGoodsId, {goodsID:goodsID,deliverStatus:deliverStatus,payStatus:payStatus,pageNo:page}, callbackGetOrderInfoList);
		}
		function callbackGetOrderInfoList(data){
			if (data.success) {
				var html = '';
				for (var i in data.context.orderList) {
					html += pingOrderInfoList(data.context.orderList[i], i*1+1);
				}
				$(".table-list tbody").html(html);
				if (isPageInit){
					isPageInit = false;
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							initOrderInfoList(page.currentPage);
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			}
		}
		function pingOrderInfoList(data,i){
			var html = '<tr>'+
						'	<td>'+i+'<input type="hidden" name="goodsOrderId" value="'+data.goodsOrderId+'" /></td>'+
						'	<td>'+data.orderNo+'</td>'+
						'	<td>'+data.takeDeliveryName+'</td>'+
						'	<td>'+data.nickName+'</td>'+
						'	<td>'+data.phone+'</td>'+
						'	<td>'+data.address+'-'+data.detailedAddress+'</td>'+
						'	<td>'+data.orderMessage+'</td>'+
						'	<td>'+data.goodsPrice+'</td>'+
						'	<td>'+(data.payStatus == 0?'未支付':'已支付')+'</td>'+
						'	<td>'+(data.isDeliver == 1?'是':'否')+'</td>'+
						'	<td>'+data.logisticsNumber+'</td>'+
						'	<td>'+data.specName+'</td>'+
						'	<td>'+data.specPrice+'</td>'+
						'	<td>'+data.purchaseNum+'</td>'+
						'	<td>'+data.logisticsFee+'</td>'+
						'	<td>'+data.paymentTime+'</td>'+
						'	<td>'+(data.isDeliver == 1?'<button class="btn btn-default" disabled="disabled">已发货</button>':'<button class="btn btn-default">发货</button>')+'</td>'+
						'</tr>';
			return html;
		}
		$(".table-list tbody").on("click", ".btn-default", function(){
			goodsOrderId= $(this).closest("tr").find("input[name='goodsOrderId']").val();
			$("#deliverModel").modal('show');
		});
		$("#addDeliver").click(function(){
			var logisticsNumber = $("#logisticsNumber").val();
			var data = {
				goodsID:goodsID,
				goodsOrderId:goodsOrderId,
				logisticsNumber:logisticsNumber
			}
			base.postData(base.url.addGoodsOrderSpecLogistics, data, function(data){
				if (data.success) {
					window.location.reload();	
				}else{
					toastr.error(data.msg);
				}
				
			});
		});
		$("#deliverStatus").change(function(){
			initOrderInfoList(1);
		});
		$("#payStatus").change(function(){
			initOrderInfoList(1);
		});
		//点击导出表格
		$("#exportTable").click(function(){
			if ($(".table-list tbody").find("tr").length == 0) {
				return;
			}
			window.location.href=base.url.exportGoodsOrderInfo+"?goodsID="+goodsID;
		});
	</script>
</body>
</html>
